<template>
  <div class="app-container div-screen-component">
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>自定义选项</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="component.view.customerOptions.values = '{}'"
            >重置参数值</el-button
          >
        </div>
        <settingPanel
          :options="customerOptions"
          :values="customerOptionsValues"
        ></settingPanel>
      </el-card>
      <br />
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>前端配置</span>
      </div>
      <editView :form="component.view" ref="editView"></editView>
    </el-card>
  </div>
</template>

<script>
import editView from "./editView";
import settingPanel from "./settingPanel";
export default {
  components: {
    editView,
    settingPanel
  },

  props: {
    component: {
      default: () => {
        return {};
      }
    }
  },
  watch: {
    customerOptionsValues: {
      deep: true,
      handler() {
        this.$set(
          this.component.view.customerOptions,
          "values",
          JSON.stringify(this.customerOptionsValues)
        );
      }
    }
  },
  computed: {
    customerOptions: {
      get() {
        this.checkData(this.component);
        // return JSON.parse(this.component.view.customerOptions.options);
        return eval("(" + this.component.view.customerOptions.options + ")");
      },
      set(v) {
        debugger;
        this.component.view.customerOptions.options = v; //JSON.stringify(v);
        this.$set(this.component.view.customerOptions, "values", "{}");
      }
    }
  },
  data() {
    return {
      //component: {}
      customerOptionsValues: {}
    };
  },
  created() {
    this.listLoading = false;
  },
  mounted() {},
  methods: {
    setBodyValue(value) {
      this.$refs.editView.setBodyValue(value);
    },
    getBodyValue() {
      return this.$refs.editView.getBodyValue();
    },
    setScriptValue(value) {
      this.$refs.editView.setScriptValue(value);
    },
    getScriptValue() {
      return this.$refs.editView.getScriptValue();
    },
    checkData(com) {
      if (!com) return false;
      if (!com.view) {
        this.$set(com, "view", {
          code: "",
          codes: "",
          cover: {
            fileId: "",
            fileName: ""
          },
          description: "",
          headLinks: "",
          id: "",
          name: "",
          resources: [
            {
              fileId: "",
              fileName: ""
            }
          ],
          size: {
            height: 0,
            width: 0
          },
          updateTime: ""
        });
      }

      if (!com.view.customerOptions) {
        this.$set(com.view, "customerOptions", {
          //自定义配置项
          options: "{}",
          //'{ "name": { "label": "姓名", "type": "String", "description": "描述" }, "address": { "label": "姓名", "type": "String", "description": "描述" }, "age": { "label": "年龄", "type": "Number" }, "gender": { "label": "性别", "type": "Radio", "selections": [ { "name": "man", "value": "1" }, { "name": "woman", "value": 0 } ] }, "hobby": { "label": "爱好", "type": "Checkbox", "selections": [ { "name": "play ball", "value": "1" }, { "name": "reading", "value": 2 }, { "name": "eating", "value": 3 } ] }, "list": { "label": "列表", "type": "Array", "options": { "name": { "label": "姓名", "type": "String", "description": "描述" }, "age": { "label": "年龄", "type": "Number" }, "other": { "label": "其它", "type": "Object", "options": { "name": { "label": "姓名", "type": "String", "description": "描述" } } }, "list": { "label": "列表", "type": "Array", "options": { "name": { "label": "姓名", "type": "String", "description": "描述" }, "age": { "label": "年龄", "type": "Number" }, "other": { "label": "其它", "type": "Object", "options": { "name": { "label": "姓名", "type": "String", "description": "描述" } } } } } } }, "other": { "label": "其它", "type": "Object", "options": { "name": { "label": "姓名", "type": "Text" }, "age": { "label": "年龄", "type": "Number", "description": "描述" }, "gender": { "label": "性别", "type": "Radio", "selections": [ { "name": "man", "value": "1" }, { "name": "woman", "value": 0 } ] }, "hobby": { "label": "爱好", "type": "Checkbox", "selections": [ { "name": "play ball", "value": "1" }, { "name": "reading", "value": 2 }, { "name": "eating", "value": 3 } ] } } } }',
          values: "{}"
        });
      }

      // try{
      //   this.customerOptionsValues = JSON.parse(
      //   unescape(this.component.view.customerOptions.values)
      // );
      // }catch(e){
      //   this.customerOptionsValues = eval('('+this.component.view.customerOptions.values+")");
      // }

      this.customerOptionsValues = eval(
        "(" + this.component.view.customerOptions.values + ")"
      );

      return true;
    }
  }
};
</script>
<style scoped>
.app-container {
  padding: 0px;
}
.div-screen-component .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.div-screen-component .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.div-screen-component .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.div-screen-component .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.div-screen-component .el-form {
  padding: 20px;
}
.div-screen-component .box-card .el-card__body {
  margin: 0px;
  padding: 0px;
}
.div-screen-component .el-card__header {
  padding: 5px 0px;
}
.div-screen-component .el-form {
  padding: 3px;
}
</style>
